<script setup>
import WalletState from "@/components/NFT/WalletState.vue";
import { useStore } from "@/store";
import {placeOrder, tokensOfOwner} from "@/contract/nft";
import { reactive, ref } from "vue";
import LightCard from "@/components/LightCard.vue";
import NFTCard from "@/components/NFT/NFTCard.vue";
import Card from "@/components/Card.vue";
import {Lollipop} from "@element-plus/icons-vue";


const store = useStore();

const confirmPlace = reactive({
  show:false,
  title:'',
  description:'',
  image:'',
  tokenId:0
})


const place = async (item)=>{
  confirmPlace.title = item.metadata.title
  confirmPlace.description = item.metadata.description
  confirmPlace.image = item.metadata.imageURL
  confirmPlace.tokenId = item.tokenId
  confirmPlace.show = true
}

</script>

<template>
  <div class="main">
    <div class="nft-list" v-if="store.wallet.connected">
      <Card title="个人藏品展示"
            desc="以下是您所有的NFT藏品"
            :icon="Lollipop">
        <LightCard v-for="item in store.wallet.nft" :key="item">
          <NFTCard :title="item.metadata.title"
                   :desc="item.metadata.description"
                   :image="item.metadata.imageURL">
            <div style="text-align: center">
              <el-button type="success" @click="place(item)">上架</el-button>
            </div>
          </NFTCard>
        </LightCard>
      </Card>
    </div>
    <div class="wallet-state">
      <wallet-state />
    </div>
    <PlaceOrder :show="confirmPlace.show"
                :title="confirmPlace.title"
                :description="confirmPlace.description"
                :image="confirmPlace.image"
                :tokenId="confirmPlace.tokenId"
                @close="confirmPlace.show = false"
                @place="confirmPlace.show = false"
                ></PlaceOrder>
  </div>
</template>

<style lang="less" scoped>

.main{
  display: flex;
  text-align: center;
  gap: 20px;
  max-width: 1000px;
  margin: 20px auto;
  .nft-list {
    flex: 1;
  }
  .wallet-state{
    max-width: 300px;
  }
}



</style>
